<template>
  <div class="pages-wrap">
    <scroll-view class="content" ref="scroll">
      <template>
        <div class="full-page">

          <banner />

          <i class="iconfont icon-zuojiantou-copy" @click="$router.back()"></i>
          <div class="right">
            <i class="iconfont ico icon-daohangshoucangyishoucang" @click.stop="btnAction2()" :class="{
              active: collectlist.filter(
                (item22) => item22.hotelId === this.$route.params.id
              ).length > 0,
            }"></i>
            <i class="iconfont icon-fenxiang" @click="showShare = true"></i>
          </div>
          <!-- <button @click="btnAction">跳转</button> -->
          <div v-if="hotelDetailData[0]">
            <!-- 介绍 -->
            <div class="introduce">
              <div class="title">
                <div class="title-avatar">
                  <span v-if="hotelDetailData[0]">{{ hotelDetailData[0].city.split(" ").shift() }} 整套公寓</span>
                  <span v-if="hotelDetailData[0]">{{ hotelDetailData[0].owenerId.hometown }}</span>
                </div>
                <div class="avatar">
                  <img
                    :src="hotelDetailData[0].avatar ? hotelDetailData[0].avatar : 'https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E8%81%8A%E5%A4%A9/u761.svg'"
                    alt="" />
                </div>
              </div>

              <div class="tip">
                <span>{{ hotelDetailData[0].score }}.0分</span>
                <span v-for="(item, index) in hotelDetailData[0].tite" :key="index">{{ item }}</span>

              </div>
            </div>
            <!-- 详情 -->
            <div class="detail">
              <div class="detail-item">
                <span>详情</span>
                <span>{{ hotelDetailData[0].offical }}
                </span>
                <div class="intro">
                  <div class="intro-item">
                    <img
                      src="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E6%88%BF%E5%B1%8B%E8%AF%A6%E6%83%85/u935.svg"
                      alt="" />
                    <span>{{ hotelDetailData[0].visitor }}位访客</span>
                  </div>
                  <div class="intro-item">
                    <img
                      src="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E6%88%BF%E5%B1%8B%E8%AF%A6%E6%83%85/u937.svg"
                      alt="" />
                    <span>{{ hotelDetailData[0].roomNum }}间房</span>
                  </div>
                  <div class="intro-item">
                    <img
                      src="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E6%88%BF%E5%B1%8B%E8%AF%A6%E6%83%85/u939.svg"
                      alt="" />
                    <span>{{ hotelDetailData[0].bedNum }}张床</span>
                  </div>
                  <div class="intro-item">
                    <img
                      src="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E6%88%BF%E5%B1%8B%E8%AF%A6%E6%83%85/u941.svg"
                      alt="" />
                    <span>{{ hotelDetailData[0].bathNum }}间卫生间</span>
                  </div>
                </div>
              </div>
            </div>
            <!-- 地点 -->
            <div class="location">
              <div class="location-item">
                <span>地点</span>
                <span>{{ hotelDetailData[0].city.split(" ").splice(0, 3).join(",") }}</span>
                <span>{{ hotelDetailData[0].city }}</span>
                <span>出行</span>
                <span><img
                    src="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E6%88%BF%E5%B1%8B%E8%AF%A6%E6%83%85/u947.png"
                    alt="" /></span>
                <span>
                  <i class="iconfont icon-liaotian"></i>
                  <span> 准确位置将在预定后提供 </span>
                </span>
              </div>
            </div>

            <!-- 价格 -->
            <div class="price">
              <span>价格明细:</span>
              <span>￥{{ hotelDetailData[0].price }}/晚</span>
            </div>
            <!-- 操作 -->
            <div class="operate">
              <button>与房东沟通</button>
              <button @click="btnAction(id)">立即预定</button>
            </div>

          </div>
          <van-share-sheet v-model="showShare" title="立即分享给好友" :options="options" @select="onSelect" />

        </div>
      </template>
    </scroll-view>
    <!-- 下一级页面 -->
    <transition enter-active-class="slideIn" leave-active-class="slideOut">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
import { recordApi, cxrecordApi, deleterecordApi } from "../../../api/record"
import { collectApi, cxcollectApi, deletecollectApi, collectListApi1 } from "../../../api/collect"
import Banner from "../com/Banner.vue";
import { ShareSheet,Toast } from "vant";
import { mapState } from "vuex";
export default {
  name: "detail-page",
  components: {
    [Banner.name]: Banner,
    [ShareSheet.name]: ShareSheet,

  },
  data() {
    return {
      id: "",
      showShare: false,
      store: [],
      isLoad: false,
      page: 1,
      count: 2,
      collectlist: [],
      options: [
        { name: "微信", icon: "wechat" },
        { name: "微博", icon: "weibo" },
        { name: "朋友圈", icon: "link" },
        { name: "qq", icon: "poster" },
        { name: "空间", icon: "qrcode" },
      ],
    };
  },

  created() {

    this.addrecord()
    this.id = this.$route.params.id;
    this.$store.dispatch("hoteldetail/requestData", this.id);
    // console.log(this.id);
    this.collectcx()
    this.addrecord()

  },
  computed: {
    ...mapState("hoteldetail", ["hotelDetailData"]),

  },

  methods: {
    async btnAction2() {
      // console.log(id);
      const res = await cxcollectApi({ hotelId: this.$route.params.id })
      // console.log(res.data);
      if (res.data) {
        await deletecollectApi({ hotelId: this.$route.params.id });

        // this.collectlist.splice(this.collectlist.length-1,1)
        // console.log(aa);


        Toast("取消收藏成功")
        this.collectcx()
        // this.$forceUpdate();
        // window.location
        // window.location.reload();
      }
      else {
        const aa = await collectApi({ hotelId: this.$route.params.id })
        console.log(aa.data.data);
        Toast("收藏成功")
        this.collectlist.push(aa.data.data)
        // this.$forceUpdate();
        // window.location.reload();


      }
    },
    addrecord() {
      const lslist = JSON.parse(localStorage.getItem("lslist")) || [];
          setTimeout(() => {
        // let flag = lslist.find((item) => {
        //   return item.guid == id;
        // });
        console.log(lslist);
        let index = lslist.findIndex((item) => {
          return item._id == this.$route.params.id;
        });
        if (index != -1) {
          lslist.splice(index, 1)
          lslist.unshift(this.hotelDetailData[0]);
          localStorage.setItem("lslist", JSON.stringify(lslist));
          return;
        }
        lslist.unshift(this.hotelDetailData[0]);
        localStorage.setItem("lslist", JSON.stringify(lslist));
      }, 1000)

    },
    chat() {
      //与房东聊天,跳转聊天
    },
    btnAction() {
      this.$router.push({ name: "createorder" })
    },
    async collectcx() {
      const a = await collectListApi1()
      this.collectlist = a.data.list;
    },
    btnAction(id) {
      this.$router.push({ name: "createorder", params: {id}, })
    },
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },

  },

  mounted() {
        // this.addrecord()
    // setTimeout(() => {
    //   recordApi({hotelId:this.$route.params.id});
    //   console.log(123);
    // },5000)
    // const scroll =
    //   this.$refs.scroll /*scrollview组件*/
    //     .scroll; /*scrollview组件内部的scroll属性对应的是iscroll对象*/
    // scroll.on("scrollEnd", () => {
    //   // console.log(scroll.y, scroll.maxScrollY);
    //   if (scroll.y === scroll.maxScrollY) {
    //     //请求推荐的商品列表，请求一次后就关闭
    //     console.log("qwe");

    //     // console.log("到了最底部");
    //   }
    // });
  }
};
</script>

<style lang="scss" scoped>
@function vw($px) {
  @return ($px / 750) * 100vw;
}

.ico.active {
  color: red;
}

.ico {
  color: #e4e4e4;
  position: relative;
  left: vw(-15);
}

.pages-wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 102;
  background-color: #fff;
  z-index: 106;

  .introduce {
    display: flex;
    flex-direction: column;
    align-items: center;

    .title {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding: 20px;

      .title-avatar {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-right: 20px;
        position: relative;
        left: vw(-90);

        span:nth-child(1) {
          font-size: 14px;
          flex-wrap: 700;
          padding-bottom: 10px;
        }

        span:nth-child(2) {
          font-size: 18px;
          flex-wrap: 700;
        }
      }

      .avatar {
        width: 50px;
        height: 50px;
        background-color: #fff;
        border-radius: 50%;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }

    .tip {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;
      width: 90%;
      padding: 0px 20px;

      span {
        width: 80px;
        height: 30px;
        background-color: #e4e4e4;
        color: #333;
        font-size: 14px;
        border-radius: 5px;
        text-align: center;
        line-height: 30px;
        margin-top: 10px;
      }
    }
  }

  /* 详情 */
  .detail {
    width: 90%;
    margin: auto;
    padding: 20px;

    .detail-item {
      display: flex;
      flex-direction: column;
      padding: 10px;
      border: 1px solid #333;
      box-shadow: 5px 5px 5px rgba(201, 201, 201, 0.35);
      border-radius: 5px;

      span:nth-child(1) {
        font-size: 18px;
        font-weight: 700;
      }

      span:nth-child(2) {
        padding-top: 20px;
        font-size: 14px;
        font-weight: 400;
      }
    }

    .intro {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;

      .intro-item {
        padding: 20px 0px 0px 0px;
        width: 50%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-evenly;

        img {
          width: 35px;
          height: 35px;
        }

        span {
          padding: 0;
          font-size: 14px;
          color: #333;
        }
      }
    }
  }

  /* 地址 */
  .location {
    width: 90%;
    margin: auto;

    .location-item {
      display: flex;
      flex-direction: column;
      border: 1px solid #333;
      box-shadow: 5px 5px 5px rgba(201, 201, 201, 0.35);
      border-radius: 5px;

      span:nth-child(1) {
        font-size: 18px;
        font-weight: 700;
        padding: 10px;
      }

      span:nth-child(2) {
        font-size: 14px;
        font-weight: 700;
        padding: 10px;
      }

      span:nth-child(3) {
        font-size: 14px;
        font-weight: 400;
        padding: 10px;
        /* 文本添加下划线 */
        text-decoration: underline;
      }

      span:nth-child(4) {
        font-size: 14px;
        font-weight: 700;
        padding: 10px;
      }

      span:nth-child(5) {
        width: 90%;
        margin: auto;
        padding: 10px;

        img {
          width: 100%;
        }
      }

      span:nth-child(6) {
        padding: 10px;
        font-size: 14px;

        i {
          width: 20px;
          height: 20px;
        }

        span {
          font-weight: 400;
        }
      }
    }
  }

  /* 价格 */
  .price {
    width: 90%;
    padding: 10px 20px;
    display: flex;
    flex-direction: row;
    align-items: center;

    span:nth-child(1) {
      font-size: 14px;
      font-weight: 700;
    }

    span:nth-child(2) {
      font-size: 20px;
      font-weight: 700;
      color: #ff9933;
      padding: 0px 20px;
    }
  }

  /* 按钮 */
  .operate {
    width: 90%;
    padding: 30px 10px;
    margin: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-around;

    button {
      background-color: #cc6666;
      font-size: 13px;
      width: 100px;
      height: 35px;
      border: none;
      border-radius: 10px;
      color: #fff;
    }
  }

  .content {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    // position: relative;

    ::v-deep .scroll-wrap {
      bottom: 0;
    }


    .full-page {
      width: 100%;
      position: relative;
      top: 0;
      left: 0;
      background-color: #fff;
      // padding-top: vw(60);

    }
  }
}


.iconfont {
  font-size: vw(40);
}

.price {
  color: #ff9933;
}

.icon-shoucang:before {
  margin-right: 10px;
  color: whitesmoke;

}

.icon-fenxiang {
  color: whitesmoke;
}

.icon-aixin:before {
  content: "\e609";
  margin-right: 10px;

}

.van-popup--bottom {
  top: 50%;
  transform: translateY(-50%);
  left: 0;


  width: 100%;
}

.icon-zuojiantou-copy {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 10;
  color: whitesmoke;
}

.right {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 10;
}

.main {
  padding: 0 vw(20);
  background-color: rgba(251, 251, 251, 1);
}

.row1 {
  img {
    width: vw(100);
    height: vw(110);
    margin-right: vw(40);
  }

  display: flex;
  position: relative;
  align-items: center;

  h3 {
    font-size: vw(28);
    font-weight: bold;
  }

  span.first {
    position: absolute;
    right: 0;
    width: vw(169);
    text-align: center;
    display: inline-block;
    border: 1px solid #f93;
    border-radius: vw(10);
    line-height: vw(56);
    height: vw(56);
    color: #f93;
  }
}

.row2 {
  margin-bottom: vw(20);

  .icon-dizhi {
    font-size: vw(40);
    margin-right: vw(10);
  }

  span {
    font-size: vw(28);
  }
}

.row3 {
  margin-bottom: vw(30);

  p {
    font-size: vw(28);
    color: #333;
    // line-height: vw(20);
  }
}

.row4 {
  h3 {
    font-size: vw(20);
    font-weight: bold;
    margin-bottom: vw(20);
  }

  .row5 {
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    border-radius: vw(8);
    height: vw(152);

    display: flex;
    justify-content: space-between;

    .left {
      width: vw(190);
      margin-right: vw(40);

      img {
        width: 100%;
        height: 100%;
      }
    }

    .right2 {
      display: flex;
      flex-direction: column;

      justify-content: space-between;
      flex: 1;

      p {
        display: flex;
        color: #333;
        justify-content: space-between;
      }
    }
  }
}

.row7 {
  height: vw(120);
  line-height: vw(120);

  .r {
    float: right;
    display: flex;

    div {
      margin-right: vw(40);
    }
  }
}

.row8 {
  height: vw(120);
  line-height: vw(120);
  background: #fff;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.row9 {
  padding: 0 vw(20);
  // height: vw(120);
  line-height: vw(120);

  h3 {
    font-weight: bold;
    color: #333;
    font-size: vw(18);
  }

  .box {
    width: 100%;

    overflow: hidden;

  }



}
</style>
